<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page session="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>激活账户/找回密码</title>
<link type="text/css" rel="stylesheet" href="css/customCss/public.css" />
<link type="text/css" rel="stylesheet" href="css/customCss/findpwd.css" />
<link type="text/css" rel="stylesheet" href="css/customCss/validator.css" />

<script type="text/javascript" src="js/customJs/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/customJs/function.js"></script>
<script type="text/javascript" src="js/customJs/jquery.validate.js"></script>
<script type="text/javascript" src="js/customJs/jquery.validate.ext.js"></script>
<script type="text/javascript" src="js/customJs/jquery.validator.messages_zh.js"></script>
</head>
<body>
 <div class="container">
        <div class="member-logo">
            <a href="#"><img src="images/customLogin/logo.png"></a>
        </div>
        <h3 class="member-des">激活账户/找回密码</h3>
        <div class="process-find">
        	<c:if test="${flag eq 'one'}">
        		<img src="images/customLogin/findpwdone.png">
        	</c:if>
        	<c:if test="${flag eq 'two'}">
        		<img src="images/customLogin/findpwdtwo.png">
        	</c:if>
        	<c:if test="${flag eq 'three'}">
        		<img src="images/customLogin/findpwdthree.png">
        	</c:if>
        	<c:if test="${flag eq 'four'}">
        		<img src="images/customLogin/findpwdfour.png">
        	</c:if>
        </div>
        
        <c:if test="${flag eq 'one'}">
        	<form action="${pageContext.request.contextPath}/findPassword?option=twoOpt" method="post" id="mobileForm">
        		<div class="input-groups">
		            <div class="input-group">
		                <input name="mobilePhone" id="mobilePhone" class="phone" type="text" placeholder="请输入注册时的手机号码" maxlength="11" />
		                <i class="icon-bg icon-input icon-bg-phone"></i>
		                <div class="input-err input-err-phone">
		                    <span id="mobilePhoneMsg"></span>
		                </div>
		            </div>
		            <div class="input-group clearfix">
		                <input name="verse_regis" id="verse_regis" class="validate" type="text" placeholder="填写验证码" />
		                <div class="btn btn-validate">
		                    <img src="./captcha.jpg" id="captchaimg" style="cursor: pointer;" onclick="imgClick(this);" />
		                </div>
		                <div class="input-err input-err-pwd">
		                    <span id="verse_regisMsg"></span>
		                </div>
		            </div>
        		</div>
        		
        		<div class="button-groups">
            		<button class="next" type="submit">下一步</button>
        		</div>
        	</form>
        </c:if>
        
        <c:if test="${flag eq 'two'}">
	        <p class="findpwdtwo-des">
	            已经向您的手机<span id="mobile">${mobile}</span> 发出验证码消息
	        </p>
	        
	        <form action="${pageContext.request.contextPath}/findPassword?option=threeOpt" method="post" id="msgCodeForm">
	        	<div class="input-groups">
		            <div class="input-group clearfix">
		                <input name="msgCode" id="msgCode" class="revalidate" type="text" placeholder="填写手机验证码" />
		                <input type="hidden" id="mobilePhone" name="mobilePhone" value="${mobile}"/>
		                <input type="hidden" id="flag" value="1"/>
		                <div class="btn btn-resend" id="getMsgCode">重新发送(<span>60</span>)</div>
		                <div class="input-err input-err-pwd">
		                    <span id="msgCodeMsg"></span>
		                </div>
		            </div>
       	 		</div>
       	 		
       	 		<div class="button-groups">
            		<button class="next" type="submit">下一步</button>
        		</div>
	        </form>
        </c:if>

        <c:if test="${flag eq 'three'}">
        	<form action="${pageContext.request.contextPath}/findPassword?option=fourOpt" method="post" id="passwordForm">
        		<div class="input-groups">
	            	<div class="input-group clearfix">
	                	<input name="pwd" id="pwd" class="pwd" type="password" placeholder="请设置新的登陆密码" />
	                	<input type="hidden" value="${mobile}" id="mobilePhone" name="mobilePhone"/>
	                	<i class="icon-bg icon-input icon-bg-lock"></i>
		                <div class="input-err input-err-pwd">
		                	<span id="pwdMsg"></span>
		                </div>
	            	</div>
        		</div>

		        <div class="input-groups">
		            <div class="input-group clearfix">
		                <input name="repwd" id="repwd" class="repwd" type="password" placeholder="请确认新的登陆密码" />
		                <i class="icon-bg icon-input icon-bg-lock"></i>
		                <div class="input-err input-err-pwd">
		                    <span id="repwdMsg"></span>
		                </div>
		            </div>
		        </div>
	        
		        <div class="button-groups">
	            	<button class="next" type="submit">下一步</button>
	        	</div>
        	</form>
        </c:if>
        
        <c:if test="${flag eq 'four'}">
        	<div class="findpwdfour">
	            <h3>恭喜您，新密码设置成功!</h3>
	            <h4>尊敬的客户，您好：</h4>
	            <p>
	                您的登陆密码重置成功！为了保障您的账号安全，请保管好并定期更改登录以及支付密码。如有任何疑问，请致电：4008-655-788。
	            </p>
       	 	</div>
       	 	
       	 	<div class="button-groups">
            	<button id="reLogin">重新登录</button>
        	</div>
        </c:if>
        <c:if test="${flag eq 'userLock'}">
        	<div class="findpwdfour">
        		<h4>尊敬的客户，您好：</h4>
        		<p style="font-size: 15px;">
	                您的账户已被冻结！如有任何疑问，请致电：4008-655-788。
	            </p>
	            <div class="button-groups">
            		<button id="reLogin">重新登录</button>
        		</div>
        	</div>
        </c:if>
        <div class="copyright">苏州科贝尔实业有限公司版权所有-备案/许可证编号为：苏ICP备15035998号</div>
    </div>
    
    <script type="text/javascript">
	    function imgClick(obj) {//切换验证码内容
			obj.src = './captcha.jpg?' + (+new Date().getTime());
		}
	    
	    var countdown = -1;
	    function getCode(obj){
	    	if(countdown == 0){
	    		obj.attr('style', 'background: #FFFFFF');
	    		obj.html('获取短信验证码');
	    		$('#flag').val('0');
	    	} else {
	    		if($('#flag').val() == '0'){
	    			var mobile = $('#mobile').html();
		    		$.ajax({
		    			type : "post",
						cache : false,
						dataType : "json",
						data : {"mobilePhone":""+mobile+"", "option" : "sendMessage"},
						url : '${pageContext.request.contextPath}/findPassword',
						success : function(data){}
		    		});
	    		}
	    		
	    		$('#flag').val('1');
	    		obj.attr('style', 'background: #f7f7f7');
	    		obj.html('重新发送('+countdown+')');
	    		countdown--;
	    	}
	    	setTimeout(function(){getCode(obj);}, 1000);
	    }
	    
	    $(function(){
	    	if('${flag}' == 'one'){
	    		jQuery.validator.addMethod("isMobile", function(value, element) {
					var len = value.length;
					var mobile = /^0?(13[0-9]|17[07]|15[012356789]|18[012356789]|14[57])[0-9]{8}$/;
					return this.optional(element) || (len == 11 && mobile.test(value));
				}, "手机号码格式错误");
		    	
		    	$("#mobileForm").validate({
		    		rules:{
		    			mobilePhone:{required: true, maxlength: 11, isMobile: true},
		    			verse_regis:{required: true, remote : {type : 'post', url : '${pageContext.request.contextPath}/findPassword?option=checkCapt', data : {'verse_regis' : function(){return $('#verse_regis').val();}}}}
					},
					messages:{
						mobilePhone:{
							required: "请输入手机号码",
							isMobile: "手机号码格式错误",
							maxlength: "手机号码不能超过11个字符"
						},
						verse_regis:{
							required : "请输入验证码",
							remote : $.format("验证码输入不正确")
						}
					},
					errorPlacement:function(error,element){
						$("#" + element.attr("name") + "Msg").empty();
						error.appendTo($("#" + element.attr("name") + "Msg"));
					}
		    	});
		    	
		    	$("#mobileForm").submit(function(){
		    		$("#mobileForm").valid();
		    	});
	    	}
	    	
	    	if('${flag}' == 'two'){
	    		var obj = $('#getMsgCode');
	    		countdown = 60;
	    		getCode(obj);
	    		
	    		$("#getMsgCode").click("onclick", function(){//发送短信验证码
		    		if($('#flag').val() == '1'){
		    			return false;
		    		}
					countdown = 60;
		    		getCode($(this));
		    	});
	    		
		    	$("#msgCodeForm").validate({
		    		rules:{
		    			msgCode:{required: true, remote : {type : 'post', url : '${pageContext.request.contextPath}/findPassword?option=checkCode', data : {'msgCode' : function(){return $('#msgCode').val();}}}}
					},
					messages:{
						msgCode:{
							required:"请输入手机验证码",
							remote : $.format("手机验证码输入不正确")
						}
					},
					errorPlacement:function(error,element){
						$("#" + element.attr("name") + "Msg").empty();
						error.appendTo($("#" + element.attr("name") + "Msg"));
					}
		    	});
		    	
		    	$("#msgCodeForm").submit(function(){
		    		$("#msgCodeForm").valid();
		    	});
	    	}
	    	
	    	if('${flag}' == 'three'){
	    		jQuery.validator.addMethod("isRepassword", function(value, element){
		    		var password = $("#pwd").val();
		    		var repassword = $("#repwd").val();
		    		return this.optional(element) || (repassword == password);
		    	});
	    		
	    		$("#passwordForm").validate({
		    		rules:{
		    			pwd:{required: true, maxlength: 20, minlength : 6},
		    			repwd:{required: true, maxlength: 20, minlength : 6, isRepassword : true}
					},
					messages:{
						pwd:{
							required:"请输入密码",
							maxlength : "密码最长为20位字符",
							minlength : "密码最短为6个字符"
						},
						repwd:{
							required:"请输入确认密码",
							maxlength:"密码最长为20位字符",
							minlength : "密码最短为6个字符",
							isRepassword : "两次密码输入不一致"
						}
					},
					errorPlacement:function(error,element){
						$("#" + element.attr("name") + "Msg").empty();
						error.appendTo($("#" + element.attr("name") + "Msg"));
					}
		    	});
		    	
		    	$("#passwordForm").submit(function(){
		    		$("#passwordForm").valid();
		    	});
	    	}
	    	
	    	if('${flag}' == 'four' || '${flag}' == 'userLock'){
	    		$('#reLogin').click('onclick', function(){
	    			window.location.href='${pageContext.request.contextPath}/login?service=${service}';
	    		});
	    	}
	    });
    </script>
</body>
</html>